@import 'restyle';

$primary-border-color: set-color(black, dune);
$secondary-border-color: set-color(white, base);

/// Defines styles for the breadcrumb container
@include restyle-define(breadcrumbs, (
  restyle-var(primary-border-color): $primary-border-color,
  restyle-var(secondary-border-color): $secondary-border-color,
  background-color: transparent,
  list-style-type: none,
  overflow: hidden,
  padding: 0,
  margin: 5px 0,
  height: 41px,
  restyle-modifiers: (
    'with a border': (
      border: 1px solid restyle-var(primary-border-color)
    )
  )
));

@include restyle-define(grain-text, (
  max-width: 120px,
  overflow: hidden,
  text-overflow: ellipsis,
  white-space: nowrap,
  display: block
));

@include restyle-define(grain, (
  restyle-var(primary-border-color): $primary-border-color,
  restyle-var(secondary-border-color): $secondary-border-color,
  float: left,
  display: block,
  position: relative,
  padding: 10px 0 10px 45px,
  '&::before': (
    content: ' ',
    display: block,
    width: 0,
    height: 0,
    border-top: 50px solid transparent,
    border-bottom: 50px solid transparent,
    border-left: 30px solid restyle-var(primary-border-color),
    position: absolute,
    top: 50%,
    margin-top: -50px,
    left: 100%,
  ),
  '&::after': (
    content: ' ',
    display: block,
    width: 0,
    height: 0,
    border-top: 50px solid transparent,
    border-bottom: 50px solid transparent,
    border-left: 30px solid restyle-var(secondary-border-color),
    position: absolute,
    top: 50%,
    margin-top: -50px,
    left: 100%,
  )
));

.nacho-breadcrumbs {
  @include restyle(breadcrumbs);

  &__crumb {
    float: left;

    &__grain {
      @include restyle(grain);
    }

    &__text {
      @include restyle(grain-text);
    }

    &:first-child &__grain {
      padding-left: 0;
    }

    &:last-child &__grain {
      cursor: default;
      pointer-events: none;
      color: inherit;
      &::after,
      &::before {
        border: 0;
      }
    }
  }
}
